<template>
  <el-form-item :label="i18nt('designer.setting.label')" v-if="!noLabelSetting" prop="label" :rules="labelRequiredRule">
    <el-input type="textarea" v-model="optionModel.label" :autosize="{ minRows: 1, maxRows: 3 }" resize="none" @change="updateLabel"></el-input>
  </el-form-item>
</template>

<script>
  import i18n from "@/utils/i18n"
  import { isEmptyStr } from "@/utils/util"

  export default {
    name: "label-editor",
    mixins: [i18n],
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
    computed: {
      noLabelSetting() {
        return (this.selectedWidget.type === 'static-text') || (this.selectedWidget.type === 'html-text')
        //|| (this.selectedWidget.type === 'divider')
      },

    },
    data() {
      return {
        labelRequiredRule: [{ required: this.selectedWidget.type === 'sub-form' || this.selectedWidget.type === 'grid-sub-form' || this.selectedWidget.type === 'table-sub-form' , message: '请输入标签名' }],
      }
    },
    methods: {
      updateLabel(newName) {
        if (this.selectedWidget.type === 'sub-form' || this.selectedWidget.type === 'grid-sub-form' || this.selectedWidget.type === 'table-sub-form') {
          if (isEmptyStr(newName)) {
            this.$message.info('请输入标签名')
            return
          }
        }
      },
    },
  }
</script>

<style lang="scss" scoped>

</style>
